<template>
    <div class="content glossaryContent">
        <!-- 搜索框 -->
        <div class="topSearch nounSearch">
            <el-select class="nounSelect" v-model="formLine.category" >
                <el-option
                    v-for="item in nounType"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
            <div class="search">
                <input type="text" name="" id="" placeholder="输入名词搜索" v-model="formLine.key" @keyup.enter="selectNounData(1)">
                <i class="el-icon-search" @click="selectNounData(1)"></i>
            </div>
            <!-- <el-button  class="elBtn" type="primary" style="margin-left:20px;border-radius:20px;" @click="modifyWorks(0)"><i class="el-icon-search"></i> 查询</el-button> -->
        </div>
        
        <div class="list glossaryList listPageStyle">
            <div class="listCommon">
                <div class="worksList common-box" v-for="(item,index) in listData" :key="index" >
                    <div class="v-icon">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="imgBox" @click="glossaryDetail(item.id)" >
                        <img src="../../../../images/img1.png" alt="">
                    </div>
                </div>
            </div>
            
        </div>
        <!-- 分页 -->
        <div class="listPagenation">
            <el-pagination background 
            layout="prev, pager, next, sizes, total, jumper" 
            :page-sizes="pagesizes"
			:page-size="pagesize"
            :total="totalNum"
            :current-page="currpage"
            @current-change="changePage"
            @size-change="sizeChange"
            > </el-pagination>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            showEdit:"",
            length:8,
            listData:[], // 数据列
            currpage:1, // 当前页
            pagesizes:[6, 10, 15, 20],
            pagesize:6, // 每页显示条数
            totalNum:8, // 查询总数
            formLine:{
                key: '',
                category:''
            },
            nounType: [] // 名称类型

        }
    },
    created(){
        this.$common.selectDictByCode("CATEGORY",res => {
            if(res.data.success)this.nounType = res.data.data.list
        })
        
        // 得到当前跳转的页面
        this.currpage = this.$route.params.page?this.$route.params.page:1
        this.key = this.$route.params.name?this.$route.params.name:""
        this.selectNounData(2)
    },
    methods:{
        glossaryDetail(index){
            // this.$router.push('/glossaryDetail/'+index)
            this.$router.push({
                path: '/glossaryDetail',
                name: `glossaryDetail`,
                params: {
                    id: index, name:this.key,page: this.currpage
                }
            })
        },
        // 查询名词解释
        selectNounData(type){
            const params = {
                    category: this.formLine.category,
                    name:this.formLine.key,
                    page:this.currpage,
                    limit:this.pagesize
            }
            if(type == 1){
                params.page = 1
            }
            this.$api.selectNounPage(params).then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.code === '200'){
                        _this.listData = result.data.data.records
                        _this.totalNum = result.data.data.total
                    }
                })
                
            })
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectNounData(2)
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectNounData(2)
        }
    }
}
</script>

<style lang="scss" scoped>
.content{
    height: 100%;
}
.nounSearch{
    .nounSelect{
       width: 20%;
       margin-right: 20px;
       .el-input__inner{
           color:#C3A9A5;
            border:2px solid #D18C91;
            border-radius: 15px; 
       }
    }
    .search{
        width: 30%
    }
}
.list{
    .worksList{
        .operateBar{
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20%;
            background: rgba($color: #E0E0E0, $alpha: 0.5);
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
            justify-content:flex-end;
            align-items: center;
        }
        .v-icon{
            top:-8%;
            left:-10%;
        }
    }
}
</style>

